<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" :model="goodsInfoData" :rules="rules" label-width="190px">
			<section class="font16 px10 pl20 borderRadius5" v-if="goodsInfoData.salesChannel.includes(2)" style="background:var(--el-color-primary-light-9);">
				<p>服务承诺</p>
			</section>
			<el-form-item class="mt10" label="商品服务承诺：" v-if="goodsInfoData.salesChannel.includes(2)">
				<section style="width:100%">
					<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addTag('promiseList')" class="mr15">
						添加
					</el-tag>
					<el-col class="mt20" :span="24" v-if="goodsInfoData.promiseList.length > 0">
						<section class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
							<el-tag @close="delTag('promiseList',index)" v-for="(item, index) of goodsInfoData.promiseList" :key="index" class="mr15" closable>
								{{ item.promiseName }}
							</el-tag>
						</section>
					</el-col>
					<explainBox msg="商品服务标签示例" :isPicUrl=true  color="var(--el-color-primary-light-2)" picUrl="https://v5.100cms.com.cn/static/dist/shop/img/shop_tag.png"/>
				</section>
			</el-form-item>
			<section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
				<p>积分获取设置</p>
			</section>
			<el-form-item label="会员积分获取：">
				<el-radio-group v-model="goodsInfoData.memberIntegral" @change="memberPointsGetTypeChangeFun">
					<el-radio :label=0>不积分</el-radio>
					<el-radio :label=1>全额积分</el-radio>
					<el-radio :disabled="goodsInfoData.skuList.length == 0" :label=2>自定义积分</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.memberIntegral == 2">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.membershipList" :key="index" :label="item.dictName" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.memberIntegralData.memberIntegralItem${item.dictValue}`" 
								:rules="scope.row.memberIntegralData[`memberIntegralItem${item.dictValue}Type`] == 1 ? 
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^([1-9]?\d|100)$/, message: '请输入0-100之间得整数', trigger: 'blur' }] :
									[{ required: true, message: '不能为空', trigger:'blur'},  { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input placeholder="请输入"  v-model="scope.row.memberIntegralData[`memberIntegralItem${item.dictValue}`]">
									<template #prepend>
										<el-select placeholder="请选择" v-model="scope.row.memberIntegralData[`memberIntegralItem${item.dictValue}Type`]" class="width140">
											<el-option label="积分比例" :value= 1 />
											<el-option label="固定积分" :value= 2 />
										</el-select>
									</template>
									<template #append>
										<span> {{ scope.row.memberIntegralData[`memberIntegralItem${item.dictValue}Type`] == 1 ? '%' : '元' }}</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="付费会员积分获取：">
				<el-radio-group v-model="goodsInfoData.paidmemberIntegral" @change="paidMemberPointsGetTypeChangeFun">
					<el-radio :label=0>不积分</el-radio>
					<el-radio :label=1>全额积分</el-radio>
					<el-radio :disabled="goodsInfoData.skuList.length == 0" :label=2>自定义积分</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.paidmemberIntegral == 2">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.paymembershipList" :key="index" :label="item.dictName" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.paidMemberIntegralData.paidMemberIntegralItem${item.dictValue}`" 
								:rules="scope.row.paidMemberIntegralData[`paidMemberIntegralItem${item.dictValue}Type`] == 1 ? 
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^([1-9]?\d|100)$/, message: '请输入0-100之间得整数', trigger: 'blur' }] :
									[{ required: true, message: '不能为空', trigger:'blur'}, { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input placeholder="请输入"  v-model="scope.row.paidMemberIntegralData[`paidMemberIntegralItem${item.dictValue}`]">
									<template #prepend>
										<el-select placeholder="请选择" v-model="scope.row.paidMemberIntegralData[`paidMemberIntegralItem${item.dictValue}Type`]" class="width140">
											<el-option label="积分比例" :value= 1 />
											<el-option label="固定积分" :value= 2 />
										</el-select>
									</template>
									<template #append>
										<span> {{ scope.row.paidMemberIntegralData[`memberIntegralItem${item.dictValue}Type`] == 1 ? '%' : '元' }}</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
				<p class="flex" style="align-items:center">积分抵扣设置 <el-icon class="ml5 mr5"><QuestionFilled /></el-icon> <span class="font14">定义最多抵扣中的【最多抵扣】指一次下单最多可抵扣；【多件累计】指允许多件累计抵扣。</span></p>
			</section>
			<el-form-item label="会员积分抵扣：" prop="memberIntegralDeduction">
				<el-radio-group v-model="goodsInfoData.memberIntegralDeduction" @change="memberPointsDeductionTypeChangeFun">
					<el-radio :label=0>关闭</el-radio>
					<el-radio :label=1>不限制抵扣数量</el-radio>
					<el-radio :label=2>自定义最多抵扣</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.memberIntegralDeduction == 2">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.membershipList" :key="index" :label="item.dictName" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.memberIntegralDeductionData.memberIntegralDeductionItem${item.dictValue}`" 
								:rules="scope.row.memberIntegralDeductionData[`memberIntegralDeductionItem${item.dictValue}Type`] == 1 ? 
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^([1-9]?\d|100)$/, message: '请输入0-100之间得整数', trigger: 'blur' }] :
									[{ required: true, message: '不能为空', trigger:'blur'},  { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input placeholder="请输入"  v-model="scope.row.memberIntegralDeductionData[`memberIntegralDeductionItem${item.dictValue}`]">
									<template #prepend>
										<el-select placeholder="请选择" v-model="scope.row.memberIntegralDeductionData[`memberIntegralDeductionItem${item.dictValue}Type`]" class="width140">
											<el-option label="最多抵扣" :value= 1 />
											<el-option label="多件累计" :value= 2 />
										</el-select>
									</template>
									<template #append>
										<span> 个 </span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="付费会员积分抵扣：" prop="paidmemberIntegralDeduction">
				<el-radio-group v-model="goodsInfoData.paidmemberIntegralDeduction" @change="paidMemberPointsDeductionTypeChangeFun">
					<el-radio :label=0>关闭</el-radio>
					<el-radio :label=1>不限制抵扣数量</el-radio>
					<el-radio :label=2>自定义最多抵扣</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.paidmemberIntegralDeduction == 2">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.paymembershipList" :key="index" :label="item.dictName" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.paidMemberIntegralDeductionData.paidMemberIntegralDeductionItem${item.dictValue}`" 
								:rules="scope.row.paidMemberIntegralDeductionData[`paidMemberIntegralDeductionItem${item.dictValue}Type`] == 1 ? 
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^([1-9]?\d|100)$/, message: '请输入0-100之间得整数', trigger: 'blur' }] :
									[{ required: true, message: '不能为空', trigger:'blur'}, { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input placeholder="请输入"  v-model="scope.row.paidMemberIntegralDeductionData[`paidMemberIntegralDeductionItem${item.dictValue}`]">
									<template #prepend>
										<el-select placeholder="请选择" v-model="scope.row.paidMemberIntegralDeductionData[`paidMemberIntegralDeductionItem${item.dictValue}Type`]" class="width140">
											<el-option label="最多抵扣" :value= 1 />
											<el-option label="多件累计" :value= 2 />
										</el-select>
									</template>
									<template #append>
										<span>个</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
				<p class="flex" style="align-items:center">余额抵扣设置 <el-icon class="ml5 mr5"><QuestionFilled /></el-icon> <span class="font14">定义最多抵扣中的【最多抵扣】指一次下单最多可抵扣；【多件累计】指允许多件累计抵扣。</span></p>
			</section>
			<el-form-item label="会员余额抵扣：" >
				<el-radio-group v-model="goodsInfoData.memberBalanceDeduction" @change="memberBalanceDeductionChangeFun">
					<el-radio :label=0>关闭</el-radio>
					<el-radio :label=1>不限制抵扣数量</el-radio>
					<el-radio :disabled="goodsInfoData.skuList.length == 0" :label=2>自定义最多抵扣</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.memberBalanceDeduction == 2">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.membershipList" :key="index" :label="item.dictName" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.memberBalanceDeductionData.memberBalanceDeductionItem${item.dictValue}`" 
								:rules="scope.row.memberBalanceDeductionData[`memberBalanceDeductionItem${item.dictValue}Type`] == 1 ? 
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^([1-9]?\d|100)$/, message: '请输入0-100之间得整数', trigger: 'blur' }] :
									[{ required: true, message: '不能为空', trigger:'blur'},  { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input placeholder="请输入"  v-model="scope.row.memberBalanceDeductionData[`memberBalanceDeductionItem${item.dictValue}`]">
									<template #prepend>
										<el-select placeholder="请选择" v-model="scope.row.memberBalanceDeductionData[`memberBalanceDeductionItem${item.dictValue}Type`]" class="width140">
											<el-option label="最多抵扣" :value= 1 />
											<el-option label="多件累计" :value= 2 />
										</el-select>
									</template>
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="付费会员余额抵扣：">
				<el-radio-group v-model="goodsInfoData.paidmemberBalanceDeduction" @change="paidMemberBalanceDeductionChangeFun">
					<el-radio :label=0>关闭</el-radio>
					<el-radio :label=1>不限制抵扣数量</el-radio>
					<el-radio :label=2>自定义最多抵扣</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.paidmemberBalanceDeduction == 2">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.paymembershipList" :key="index" :label="item.dictName" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.paidMemberBalanceDeductionData.paidMemberBalanceDeductionItem${item.dictValue}`" 
								:rules="scope.row.paidMemberBalanceDeductionData[`paidMemberBalanceDeductionItem${item.dictValue}Type`] == 1 ? 
									[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^([1-9]?\d|100)$/, message: '请输入0-100之间得整数', trigger: 'blur' }] :
									[{ required: true, message: '不能为空', trigger:'blur'}, { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
									<el-input placeholder="请输入"  v-model="scope.row.paidMemberBalanceDeductionData[`paidMemberBalanceDeductionItem${item.dictValue}`]">
										<template #prepend>
											<el-select placeholder="请选择" v-model="scope.row.paidMemberBalanceDeductionData[`paidMemberBalanceDeductionItem${item.dictValue}Type`]" class="width140">
												<el-option label="最多抵扣" :value= 1 />
												<el-option label="多件累计" :value= 2 />
											</el-select>
										</template>
										<template #append>
											<span>元</span>
										</template>
									</el-input>
									<!-- <el-input placeholder="请输入"  v-model="scope.row.paidMemberBalanceDeductionData[`paidMemberBalanceDeductionItem${item.dictValue}`]">
										<template #prepend>
											<el-select placeholder="请选择" v-model="scope.row.paidMemberBalanceDeductionData[`paidMemberBalanceDeductionItem${item.dictValue}Type`]" class="width140">
												<el-option label="积分比例" :value= 1 />
												<el-option label="固定积分" :value= 2 />
											</el-select>
										</template>
										<template #append>
											<span>元</span>
										</template>
									</el-input> -->
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</el-form>
		<section style="text-align: center; margin: 10px 0;">
			<el-button type="primary" @click="previousStep">上一步</el-button>
			<el-button type="primary" @click="nextStep(ruleFormRef)">下一步</el-button>
		</section>
		<tagSelect ref="tagSelectRef" @selectTagFun="selectTagFun"></tagSelect>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, ref, defineAsyncComponent} from 'vue';
import { goodsInfo } from '/@/stores/goods';
import { Plus,QuestionFilled } from '@element-plus/icons-vue'
const goodsInfoData = goodsInfo()
const tagSelect = defineAsyncComponent(() => import('/@/components/dialog/tagSelect.vue'))
const tagSelectRef = ref()
const emit = defineEmits(['stepChange'])
const ruleFormRef = ref<FormInstance>()
// 定义父组件传过来的值
const props = defineProps({
	// 会员列表
	membershipList: {
		type: Array,
	},
	// 付费会员列表
	paymembershipList: {
		type: Array,
	},
	recommend: {
		type: Array,
	},
});

const state = reactive({
	tagList:[] as Array<any>
})

const rules = reactive<FormRules<any>>({
	memberIntegral: [{ required: true, message: '请选择会员积分设置', trigger: 'change' }],
	paidmemberIntegral: [{ required: true, message: '请选择付费会员积分设置', trigger: 'change' }],
})

// 添加标签组， 购买，浏览等权限
const addTag = (value:any) => {
	tagSelectRef.value.openDialog(value,goodsInfoData[value]);
}

// 标签组删除
const delTag = (type:String,index:any) => {
	goodsInfoData[type].splice(index,1)
}

// 选中的标签
const selectTagFun = (type:String,tagItem:any) =>{
	goodsInfoData[type] = tagItem
}

// 会员积分获取
const memberPointsGetTypeChangeFun = (val:any) => {
	if(val == 2){
		//  根据当前会员等级生成会员积分数据
		if(goodsInfoData.skuList.length > 0 && props.membershipList.length > 0){
			goodsInfoData.skuList.map((item:any) => {
				let data = {};
				props.membershipList.map((item:any) =>{
					data[`memberIntegralItem${item.dictValue}`] = 3; //积分值
					data[`memberIntegralItem${item.dictValue}Type`] = 1;  //积分值类型
				})
				item.memberIntegralData = data;
			})
		}
	}
}

// 付费会员积分获取
const paidMemberPointsGetTypeChangeFun = (val:any) => {
	if(val == 2){
		//  根据当前付费会员等级生成会员积分数据
		if(goodsInfoData.skuList.length > 0 && props.paymembershipList.length > 0){
			goodsInfoData.skuList.map((item:any) => {
				let data = {};
				props.paymembershipList.map((item:any) =>{
					data[`paidMemberIntegralItem${item.dictValue}`] = 2; //积分值
					data[`paidMemberIntegralItem${item.dictValue}Type`] = 1;  //积分值类型
				})
				item.paidMemberIntegralData = data;
			})
		}
	}
}

// 会员积分抵扣
const memberPointsDeductionTypeChangeFun = (val:any) => {
	if(val == 2){
		//  根据当前会员等级生成会员积分数据
		if(goodsInfoData.skuList.length > 0 && props.membershipList.length > 0){
			goodsInfoData.skuList.map((item:any) => {
				let data = {};
				props.membershipList.map((item:any) =>{
					data[`memberIntegralDeductionItem${item.dictValue}`] = 3; // 抵扣积分值
					data[`memberIntegralDeductionItem${item.dictValue}Type`] = 1;  //抵扣积分值类型
				})
				item.memberIntegralDeductionData = data;
			})
		}
	}
}


// 付费会员积分抵扣
const paidMemberPointsDeductionTypeChangeFun = (val:any) => {
	if(val == 2){
		//  根据当前付费会员等级生成会员积分数据
		if(goodsInfoData.skuList.length > 0 && props.paymembershipList.length > 0){
			goodsInfoData.skuList.map((item:any) => {
				let data = {};
				props.paymembershipList.map((item:any) =>{
					data[`paidMemberIntegralDeductionItem${item.dictValue}`] = 2; //积分值
					data[`paidMemberIntegralDeductionItem${item.dictValue}Type`] = 1;  //积分值类型
				})
				item.paidMemberIntegralDeductionData = data;
			})
		}
	}
}

const memberBalanceDeductionChangeFun = (val:any) => {
	if(val == 2){
		//  根据当前会员等级生成会员积分数据
		if(goodsInfoData.skuList.length > 0 && props.membershipList.length > 0){
			goodsInfoData.skuList.map((item:any) => {
				let data = {};
				props.membershipList.map((item:any) =>{
					data[`memberBalanceDeductionItem${item.dictValue}`] = 3; //积分值
					data[`memberBalanceDeductionItem${item.dictValue}Type`] = 1;  //积分值类型
				})
				item.memberBalanceDeductionData = data;
			})
		}
	}
}

const paidMemberBalanceDeductionChangeFun = (val:any) => {
	if(val == 2){
		//  根据当前付费会员等级生成会员积分数据
		if(goodsInfoData.skuList.length > 0 && props.paymembershipList.length > 0){
			goodsInfoData.skuList.map((item:any) => {
				let data = {};
				props.paymembershipList.map((item:any) =>{
					data[`paidMemberBalanceDeductionItem${item.dictValue}`] = 2; //积分值
					data[`paidMemberBalanceDeductionItem${item.dictValue}Type`] = 1;  //积分值类型
				})
				item.paidMemberBalanceDeductionData = data;
			})
		}
	}
}

const previousStep = () => {
	emit('stepChange', 'fifth')
}

// 下一步
const nextStep = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			emit('stepChange', 'seventh')
		} else {
			//
			ElMessage.warning('请补全商品信息');
			// skuListFormRef.value.validate();
		}
	})
}
</script>

<style lang="scss" scoped>
.base-info-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-form{
		flex:1;
		overflow-y: auto;
		position: relative;
	}
}
</style>
